<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="">
			省份:<select name="" id="provinceId" onclick="province();">
				<option value="-1">请选择省份</option>
			</select>
			城市:<select name="" id="cityId" onclick="city()">
				<option value="-1">请选择城市</option>
			</select>
			区:<select name="">
				<option value="-1" id="countryId" onclick="country()">请选择区</option>
			</select>
			<br />
			<label id="selectvalues">你选择的是:</label>
		</div>
	</body>
	<script type="text/javascript">
		var  provinces = ['北京市','上海市','福建省','安徽省','浙江省','广东省',];
		provinces.push('江苏省');
        var citys =[['朝阳区','海淀区'],['嘉定区','浦东区'],['泉州市','厦门市','龙岩市']
		,['合肥市', '安庆市'],['杭州市','宁波市'],['深圳市','广州市'],['苏州市','南京市']];
		var countrys=[['',''],['',''],['晋江市','同安区','新罗区'],['包何区','宿松县'],
		 ['临平区','江北区'],['南山区','南沙区'],['虎丘区','六合区']];
		
					function province(){
		 				var provinceObj = document.getElementById('provinceId');
		 				var cityObj = document.getElementById('cityId');
		 				cityObj.innerHTML = `<option value="-1">请选择城市</option>`;
		 				if(provinceObj.value==-1){
		 					return;
		 				}
		 				var city = citys[provinceObj.value];			
		 				for(var i=0;i<city.length;i++){
		 					cityObj.innerHTML+=`<option value="`+i+`">`+city[i]+`</option>`;
		 				}
		 			}
		 			function city(){
		 				var provinceObj = document.getElementById('provinceId');
		 				var cityObj = document.getElementById('cityId');
		 				var provinceName = provinces[provinceObj.value];
		 				var cityName = citys[provinceObj.value][cityObj.value];
		 			
		 				var selectObj = document.getElementById('selectValue');
		 				selectObj.innerText = provinceName+": "+cityName;
		 			}
					function country(){
						var provinceObj = document.getElementById('provinceId');
						var cityObj = document.getElementById('cityId');
						var countryObj = document.getElementById('countryId');
						var provinceName = provinces[provinceObj.value];
						var cityName = citys[provinceObj.value][cityObj.value];
						var countryName =countrys[cityObj.value][countryObj.value];
						var selectObj =document.getElementById('selectValue')
						selectObj.innerText = provinceName+": "+cityName+": "+countryName;
					}
		 			onload = function(){
		 				
		 				var provinceObj = document.getElementById('provinceId');
		 				for(var i=0;i<provinces.length;i++){
		 					provinceObj.innerHTML+=`<option value="`+i+`">`+provinces[i]+`</option>`;
		 				}
		 				
		 			}
	</script>
</html>
